<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ustora Demo</title>
    
    <!-- Google Fonts -->
    <link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,200,300,700,600' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Raleway:400,100' rel='stylesheet' type='text/css'>
    
    <!-- Bootstrap -->
    <link rel="stylesheet" href="${request.contextPath}/css/bootstrap.min.css">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="${request.contextPath}/css/font-awesome.min.css">
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="${request.contextPath}/css/owl.carousel.css">
    <link rel="stylesheet" href="${request.contextPath}/style.css">
    <link rel="stylesheet" href="${request.contextPath}/css/responsive.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
   
    <div class="header-area">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <div class="user-menu">
                        <ul>
                            <li><a href="http://localhost:8010/shophome1"><i class="fa fa-user"></i>主页</a></li>
                            <li><a href="http://localhost:8010/person"><i class="fa fa-heart"></i>个人中心</a></li>
                            <li><a href="http://localhost:8010/cart"><i class="fa fa-user"></i>购物车</a></li>
                            <li><a href="http://localhost"><i class="fa fa-user"></i>登录</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div> <!-- End header area -->
    

    <div class="mainmenu-area">
        <div class="container">
            <div class="row">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
            </div>
        </div>
    </div> <!-- End mainmenu area -->
    
    <div class="slider-area">
        	<!-- Slider -->
			<div class="block-slider block-slider4">
				<ul class="" id="bxslider-home4">
					<li>
						<img src="${request.contextPath}/img/h4-slide.png" alt="Slide">
						<div class="caption-group">
							<h2 class="caption title">
								苹果<span class="primary">6 <strong>Plus</strong></span>
							</h2>
							<a class="caption button-radius" href="#"><span class="icon"></span>现在购买</a>
						</div>
					</li>
					<li><img src="${request.contextPath}/img/h4-slide2.png" alt="Slide">
						<div class="caption-group">
							<h2 class="caption title">
								办公用品<span class="primary">全新</span>
							</h2>
							<a class="caption button-radius" href="#"><span class="icon"></span>现在购买</a>
						</div>
					</li>
					<li><img src="${request.contextPath}/img/h4-slide4.png" alt="Slide">
						<div class="caption-group">
						  <h2 class="caption title">
								电子产品<span class="primary">购买<strong>耳机</strong></span>
							</h2>
							<a class="caption button-radius" href="#"><span class="icon"></span>现在购买</a>
						</div>
					</li>
				</ul>
			</div>
			<!-- ./Slider -->
    </div> <!-- End slider area -->
    
    <div class="promo-area">
        <div class="zigzag-bottom">我们的承诺</div>
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-6">
                    <div class="single-promo promo1">
                        <i class="fa fa-refresh"></i>
                        <p>不给退货</p>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="single-promo promo2">
                        <i class="fa fa-truck"></i>
                        <p>收费购物</p>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="single-promo promo3">
                        <i class="fa fa-lock"></i>
                        <p>不安全</p>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="single-promo promo4">
                        <i class="fa fa-gift"></i>
                        <p>没有新产品</p>
                    </div>
                </div>
            </div>
        </div>
    </div> <!-- End promo area -->
    
    <div class="maincontent-area">
        <div class="zigzag-bottom"></div>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="latest-product">
                        <h2 class="section-title">产品</h2>
                        <div class="product-carousel">
                            ${message}
                            <#list itemsList as list>
                            <div class="single-product">
                                <div class="product-f-image">
                                    <img src="${request.contextPath}/img/product-1.jpg" alt="">
                                    <div class="product-hover">
                                        <a href="/addcart1/iid/${list.iid}/" class="add-to-cart-link"><i class="fa fa-shopping-cart"></i> 添加到购物车</a>
                                        <a href="/singleproduct/iid/${list.iid}" class="view-details-link"><i class="fa fa-link"></i> 查看详细信息</a>
                                    </div>
                                </div>
                                <h2><a href="singleproduct.ftl">${list.itemname}</a></h2>
                                <div class="product-carousel-price">
                                    <ins>￥${list.price}</ins>
                                </div> 
                            </div>
                            </#list>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> <!-- End main content area -->
    
    <div class="brands-area">
        <div class="zigzag-bottom"></div>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="brand-wrapper">
                        <div class="brand-list">

                            <#if categoryList ??>
                                <#list categoryList as list>
                                    <a href="/shopitem/cid/${list.cid}">${list.cname}</a>
                                </#list>
                            </#if>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> <!-- End brands area -->

    <!-- Latest jQuery form server -->
    <script src="https://code.jquery.com/jquery.min.js"></script>
    
    <!-- Bootstrap JS form CDN -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    
    <!-- jQuery sticky menu -->
    <script src="${request.contextPath}/js/owl.carousel.min.js"></script>
    <script src="${request.contextPath}/js/jquery.sticky.js"></script>
    
    <!-- jQuery easing -->
    <script src="${request.contextPath}/js/jquery.easing.1.3.min.js"></script>
    
    <!-- Main Script -->
    <script src="${request.contextPath}/js/main.js"></script>
    
    <!-- Slider -->
    <script type="text/javascript" src="${request.contextPath}/js/bxslider.min.js"></script>
	<script type="text/javascript" src="${request.contextPath}/js/script.slider.js"></script>
  </body>
</html>